import { useState } from 'react'
import { useSelector } from 'react-redux'
import { useDispatch } from 'react-redux'
import { decr, incr, incrAsyncThunk, incrByAmount, incrByAmountIfOdd } from './myCounterSlice'

export default function MyCounter() {
  const dispatch = useDispatch()
  const value = useSelector((state) => state.myCounter.value)
  const status = useSelector((state) => state.myCounter.status)
  const [amount, setAmount] = useState(3)

  return (
    <div>
      <h1>{status === 'pending' ? '结果计算中...' : value}</h1>
      <p>
        <button onClick={() => dispatch(incr())}>+</button>
        <button onClick={() => dispatch(decr())}>-</button>
        <button onClick={() => dispatch(incrAsyncThunk())}>asyc +</button>
      </p>
      <p>
        <input type='text'
          value={amount}
          onChange={e => {setAmount(+e.target.value)}}/>
        <button onClick={
          () => dispatch(incrByAmount( amount ))
        }>按输入数量增加</button>
        <button onClick={
          () => dispatch(incrByAmountIfOdd(amount))
        }>当奇数的时候按输入数量增加</button>

      </p>
    </div>
  )
}
